<!-- 简易行 -->

<template>
  <div :class="className">
    <slot />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const name = 'EasyRow'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 样式类
     */
    className() {
      const { flex, col2, col3, col4, col5, col6, col8, col10, col12, col16, col24, col } = this
      const name = `CoreWeb-${this.$options.name}`
      if (flex) return `${name} flex`
      if (col2) return `${name} col2`
      if (col3) return `${name} col3`
      if (col4) return `${name} col4`
      if (col5) return `${name} col5`
      if (col6) return `${name} col6`
      if (col8) return `${name} col8`
      if (col10) return `${name} col0`
      if (col12) return `${name} col2`
      if (col16) return `${name} col6`
      if (col24) return `${name} co24`
      if (col) return `${name} col${col}`
      return name
    },
  },
}
</script>
